<template>
  <a-modal class="form1"
           v-model="dialogVisible"
           title="买家待下单"
           width="1280px"
           height="609px"
           :dialog-style="{ top: '20vh' }"
           @ok="handleOk()"
           :footer="null"
           @cancel="cancelOK()">
    <div class="title">
      <div class="title1">
        <a-input-search placeholder="搜索订单编号/业务单号/商品名称/商品编码"
                        style="width: 320px"
                        @search="onSearch" />
      </div>
      <div class="title2">
        <div>订货确认时间：<a-range-picker :placeholder="['开始时间','结束时间']"
                          v-model="form1.time"
                          @change="onChangehomeDeliveryStartTime"
                          style="width:200px">
            <a-icon slot="suffixIcon"
                    type="calendar" />
          </a-range-picker>
        </div>
        <div @click="clicktime(1)"
             :class="{'red':Timestatus===1}">今</div>
        <div @click="clicktime(2)"
             :class="{'red':Timestatus===2}">昨</div>
        <div @click="clicktime(3)"
             :class="{'red':Timestatus===3}">最近7天</div>
        <div @click="clicktime(4)"
             :class="{'red':Timestatus===4}">过去30天</div>
        <span class="span">重置</span>
      </div>
      <div class="table">
        <a-table :columns="columns"
                 :data-source="data"
                 :pagination="false"
                 :scroll="{y: 290 }"
                 class="list-height">
        </a-table>
      </div>
    </div>
    <div class="title-footer">
      <span>共 <i>{{total}}</i> 页</span>
      <pagination @pageChange="pageChange"
                  :total="total"
                  :current="form.current"></pagination>
    </div>
  </a-modal>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '订货确认时间',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '零件号',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '商品名称',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: '规格',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: '计量单位',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: '订货数量',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: '服务网点',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: '操作人',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },

];
import pagination from '@/components/common/pagination.vue'
export default {
  components: {
    pagination
  },
  name: 'UserEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      dialogVisible: false,
      Timestatus: 1,
      data,
      columns,
      total: 10,
      Today: '',
      form: {
        startTime: '',
        endTime: '',
        keyWords: '',
        pageNo: 1,
        pageSize: 10,
      },
      form1: {

      },
    }
  },
  created () {
    this.form.startTime = new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
    this.form.endTime = new Date().format('yyyy-MM-dd hh:mm:ss').split(' ')[0]
    this.Today = new Date().getTime()
  },
  methods: {
    getList () {

    },
    handleOk () { },
    cancelOK () {
      this.$emit('cancel')
    },
    pageChange (current) {
      console.log(current);
      this.form.current = current;
    },
  },
  watch: {
    visible (newVal) {
      this.dialogVisible = newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.red {
  border: 1px solid @activeRed !important;
}
.title {
  padding-bottom: 16px;
  padding: 0 24px 16px;
  .title1 {
    text-align: right;
    padding-bottom: 16px;
  }
  .title2 {
    width: 1232px;
    height: 64px;
    border-radius: 2px;
    box-shadow: 0px 0px 6px 1px rgba(39, 36, 36, 0.06);
    padding: 16px;
    margin-bottom: 16px;
    > div {
      font-size: 12px;
      float: left;
      height: 32px;
      padding: 0 10px;
      line-height: 30px;
      margin-right: 8px;
      border: 1px solid @newBorderS;
      cursor: pointer;
      color: @newColorGreyFontM;
    }
    > div:nth-child(1) {
      border: none;
    }
    .span {
      float: right;
      margin-top: 7px;
      font-size: 12px;
      cursor: pointer;
    }
  }
}
.title-footer {
  border-top: 1px solid @newBorder;
  width: 1280px;
  height: 56px;
  text-align: right;
  padding: 16px 24px 0 0;
  span {
    font-size: 12px;
    color: @newColorGreyFont;
    margin-right: 12px;
    i {
      font-size: 12px;
      color: @newColorGreyFontM;
      font-style: normal;
      color: @activeRed;
    }
  }
}
/deep/ .ant-modal-body {
  padding: 24px 0 0;
}
</style>